<!DOCTYPE html>

<html>
<head>
  <title>分类 - 我的 beego 播客</title>
  {{template "header"}}
</head>

<body style="padding-top: 70px">
  <!-- 导航栏 -->
  {{template "navbar" .}}

  <!-- 内容 -->
  <div class="container">
    <h2>文章分类</h2>
    <form method="GET" action="/category">
      <div class="form-group">
        <label>分类名称</label>
        <input id="name" type="text" class="form-control" placeholder="分类名称" name="name">
      </div>
      <input type="hidden" name="op" value="add">
      <button type="submit" class="btn btn-default" onclick="return checkInput()">添加</button>
    </form>

    <div>分类列表</div>
    <table class="table table-striped">
      <thread>
        <tr>
          <th>#</th>
          <th>名称</th>
          <th>文章数</th>
          <th>操作</th>
        </tr>
      </thread>
      <tbody>
        {{range .Categories}}
        <tr>
          <th>{{.Id}}</th>
          <th>{{.Title}}</th>
          <th>{{.TopicCount}}</th>
          <th>
            <a href="/category?op=del&id={{.Id}}">删除</a>
          </th>
        </tr>
        {{end}}
      </tbody>
    </table>
  </div>

  <!-- 导入bootstrap js插件 -->
  <script type="text/javascript" src="https://cdn.staticfile.org/jquery/3.2.1/jquery.min.js"></script>
  <script type="text/javascript" src="/static/js/bootstrap.min.js"></script>
  <script type="text/javascript">
    function checkInput() {
      var name = document.getElementById("name");
      if (name == undefined || name == "") {
        window.alter("请输入分类名称！");
        return false;
      }
    }
  </script>
</body>
</html>